import React, { useEffect, useState } from 'react';
import { Button, Card, Tag, Input } from 'antd';
import { connect } from 'dva';


const theProps = (state) => {
    console.log(state)
    return {
        id: state.maps.mapsId,
        qemscanView: state.qemscan.qemscanView,
        mapsInfo: state.maps.mapsInfo[0],
        qemscanIframe: state.qemscan.qemscanIframe
    }
}
function Qemscan(props) {
    const { qemscanView, dispatch, id, qemscanIframe } = props;
    const [viewer, setViewer] = useState(null);
    const [radioNum, setRadio] = useState(1000000)

    useEffect(() => {
        dispatch({
            type: 'qemscan/qemscanDisplay',
            payload: id
        })
    }, [dispatch, id])
    useEffect(() => {
        dispatch({
            type: 'qemscan/getInfo',
            payload: id
        });
        dispatch({
            type: 'maps/getInfo',
            payload: id
        });
        return () => {
        }
    }, [dispatch, id]);
    let qemscanString = qemscanView[0] ? qemscanView[0].qemscanDtls[0].path : ''
    let qemscanImg = 'http://10.89.101.39:9000/' + qemscanString
    const html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script></script></head><body><img class="qemscan"src="${qemscanImg}"></body></html>`
    const handleStartTask = () => {
        let qemscanData = {
            pictureId: id,
            path: qemscanView[0]?.qemscanDtls[0]?.path
        }
        dispatch({
            type: 'qemscan/qemscanStart',
            payload: qemscanData
        })
    }
    // useEffect(() => {
    //     initOpenseadragon();
    //     return () => {
    //         viewer && viewer.destroy();
    //     };

    // }, [mapsInfo]);

    // const handleSize = () => {
    //     let v = radioNum
    //     if (!v)
    //         return '';
    //     let unit = ['pm', 'nm', 'μm', 'mm'];
    //     let n = 0;
    //     let s = 1000;
    //     if (v < s) {
    //         return v + 'pm'
    //     }
    //     do {
    //         v = v / s;
    //         n++;
    //     }
    //     while (Math.round(v) >= s && n < unit.length);
    //     return <span style={{ color: 'red' }}>{Math.round(v) + unit[n]}</span>;
    // }

    // const handleScroll = e => {
    //     if (e.deltaY < 0) {
    //         if (radioNum > 1)
    //             setRadio(radioNum / 10)
    //     } else {
    //         if (radioNum <= 100000)
    //             setRadio(radioNum * 10)
    //     }
    // }

    // const initOpenseadragon = () => {
    //     viewer && viewer.destroy();
    //     setViewer(
    //         OpenSeaDragon({
    //             id: "mapsviewer",
    //             // prefixUrl: "assets/openseadragon/images/",

    //             placeholderFillStyle: '#000',
    //             showNavigator: true,
    //             navigatorHeight: "120px",
    //             navigatorWidth: "180px",
    //             zoomPerScroll: 1.4,
    //             zoomInButton: "zoom-in",
    //             zoomOutButton: "zoom-out",

    //             toolbar: 'toolbarDiv',
    //             fullPageButton: "full-page",
    //             zoomPerClick: 1,
    //             tileSources: {
    //                 Image: {
    //                     xmlns: mapsInfo?.dto.xmlns,
    //                     Url: 'http://10.89.101.39:9000/data/' + mapsInfo?.maps?.path + '/SE2_files/',
    //                     Overlap: mapsInfo?.dto.overlap,
    //                     TileSize: mapsInfo?.dto.tileSize,
    //                     Format: mapsInfo?.dto.format,
    //                     Size: {
    //                         Height: mapsInfo?.dto.height,
    //                         Width: mapsInfo?.dto.width
    //                     }
    //                 }
    //             }
    //         })
    //     )
    // }

    return (
        <Card
            style={{
                width: '82vw',
                height: '75vh'
            }}
            title={
                <>
                    <Tag style={{ fontSize: '15px' }} color="#2db7f5">样品编号:{qemscanView[0] ? qemscanView[0].qemscan?.sampleId : ''}</Tag>
                    <Tag style={{ fontSize: '15px' }} color="#2db7f5">区块:{qemscanView[0] ? qemscanView[0].qemscan?.wellBlock : ''}</Tag>
                    <Tag style={{ fontSize: '15px' }} color="#2db7f5">井区:{qemscanView[0] ? qemscanView[0].qemscan?.region : ''}</Tag>
                    <Tag style={{ fontSize: '15px' }} color="#2db7f5">井号:{qemscanView[0] ? qemscanView[0].qemscan?.wellNum : ''}</Tag>
                    <Tag style={{ fontSize: '15px' }} color="#2db7f5">层次:{qemscanView[0] ? qemscanView[0].qemscan?.wellLayer : ''}</Tag>
                    <Tag style={{ fontSize: '15px' }} color="#2db7f5">井深:{qemscanView[0] ? qemscanView[0].qemscan?.wellDeep : ''}</Tag>
                </>
            }
            extra={
                <>
                    <Tag style={{ fontSize: '15px', color: 'black' }} color="#255255255">背景色:<Input style={{ width: '10px', backgroundColor: 'rgb(255,255,255)', height: '20px' }}></Input></Tag>
                    <Tag style={{ fontSize: '15px', color: 'black' }} color="#255255255">石英:<Input style={{ width: '10px', backgroundColor: 'rgb(255,192,192)', height: '20px' }}></Input></Tag>
                    <Tag style={{ fontSize: '15px', color: 'black' }} color="#255255255">长石类:<Input style={{ width: '10px', backgroundColor: 'rgb(0,255,255)', height: '20px' }}></Input></Tag>
                    <Tag style={{ fontSize: '15px', color: 'black' }} color="#255255255">碳酸盐岩:<Input style={{ width: '10px', backgroundColor: 'rgb(0,192,0)', height: '20px' }}></Input></Tag>
                    <Tag style={{ fontSize: '15px', color: 'black' }} color="#255255255">粘土:<Input style={{ width: '10px', backgroundColor: 'rgb(255,128,128)', height: '20px' }}></Input></Tag>
                    <Tag style={{ fontSize: '15px', color: 'black' }} color="#255255255">其他:<Input style={{ width: '10px', backgroundColor: 'rgb(0,0,0)', height: '20px' }}></Input></Tag>
                    <Tag style={{ fontSize: '15px', color: 'black' }} color="#255255255">黄铁矿:<Input style={{ width: '10px', backgroundColor: 'rgb(255,255,0)', height: '20px' }}></Input></Tag>

                    <Button onClick={handleStartTask}>开始任务</Button>
                </>
            }
        >
            <div style={{ height: '70vh', display: 'flex', width: '85vw' }}>
                <div style={{ width: '45vw', height: '50vh' }}>
                    {/* <Button type="primary" style={{ marginRight: '1em', marginBottom: '1em' }} id="full-page" >全屏预览</Button>
                    <div id="toolbarDiv">
                        {
                            handleSize()
                        }
                        <div
                            style={{
                                width: '5em',
                                backgroundColor: 'red',
                                height: '0.2em'
                            }}
                        >
                        </div>
                    </div>
                    <div id="mapsviewer"
                        onWheel={e => handleScroll(e)}
                        style={{
                            marginTop: '1vh',
                            height: "100%",
                            width: "100%"
                        }} /> */}
                    <iframe
                        title="resg"
                        style={{
                            border: '0px', marginTop: '10vh', height: "90%",
                            width: "100%"
                        }}
                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                        scrolling="auto"
                        allowfullscreen="true"
                        src={qemscanIframe}
                    />

                </div>
                <div style={{ minwidth: '30vw', marginLeft: '10vh', maxHeight: '50vh', marginTop: '10vh' }}>
                    <iframe
                        title="resg"
                        srcDoc={html}
                        style={{ width: '40vw', border: '0px', height: '50vh' }}
                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                        scrolling="auto"
                    />
                </div>
            </div>
        </Card>
    )
}

export default connect(theProps, null)(Qemscan)
